import React, {useEffect, useState} from 'react'
import Header from '../components/Header'
import {useDispatch, useSelector} from 'react-redux'
import {reqHotSearch, reqSong} from '../api/api'
import {useNavigate} from 'react-router-dom'


export default function HotSearch() {
    const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
    console.log(randomHex())
    const navigate =  useNavigate()
    const {searchList} = useSelector(state => state.searchList)
    const dispatch =useDispatch()
    const [SearchList, setSearchList] = useState([])
    useEffect(() => {

        let Music = async () => {
            let result = await reqHotSearch({limit:15})
            setSearchList(result.data.result.hots)
        }
        Music()
    }, [])
    const GoMusic = async (item) => {
        let result = await reqSong(item.id)
        let url  =  result.data.data[0].url
        const {name, id} = item
        const img1v1Url = item.artists[0].img1v1Url
        const play =
            {
                title: name,
                artist: name,
                audioSrc: url,
                image: img1v1Url,
                color: randomHex()
            }
            localStorage.setItem('MUSIC',JSON.stringify(play))
        navigate('/musicpiay',{state:{play}})
    }
    return (
        <div>
            <Header></Header>

            <div className="b1" >
                {
                    searchList?.map((item,index)=>(<div className="b2"  onClick={()=>GoMusic(item)} key={index}>{item.name}</div>))
                }
            </div>



        </div>
    )
}

